<template>
  <section class="ling-top-text release_task_wrap">
    <h2>发布</h2>
    <div class="release_task_detail">
      <div class="release_task_items">
        <h3>任务简述</h3>
        <van-field
          v-model="title"
          placeholder="请描述任务简述"
          name="title"
          v-validate="'required'"
          maxlength="15"
          :error="errors.has('title')"
        />
      </div>
      <div class="release_task_items">
        <h3>行业</h3>
        <van-field
          :value="industry.text"
          readonly
          placeholder="请选择行业"
          name="industry"
          v-validate="'required'"
          :error="errors.has('industry')"
          @click="handleUpdateIndustryInfo"
        />
        <van-icon
          class
          :class="['filter-items-icons',{active:industryStatus==true}]"
          name="arrow-down"
        />
        <Picker
          @sendToParent="changeStatus"
          :title="industryTit"
          :status="industryStatus"
          :columns="industryList"
        />
      </div>
      <div class="release_task_items">
        <h3>项目内容</h3>
        <van-field
          :value="jobs.text"
          readonly
          placeholder="请选择项目内容"
          name="jobs"
          v-validate="'required'"
          :error="errors.has('jobs')"
          @click="handleUpdateJobsInfo"
        />
        <van-icon
          class
          :class="['filter-items-icons',{active:industryStatus==true}]"
          name="arrow-down"
        />
        <Picker
          @sendToParent="changeStatus"
          :title="jobsTit"
          :status="jobsStatus"
          :columns="industryPositionList"
        />
      </div>
      <div class="release_task_items">
        <h3>初步预算</h3>
        <van-field
          v-model="budgetInfo"
          rows="1"
          autosize
          placeholder="填写最低预算"
          name="budgetInfo"
          v-validate="'required'"
          maxlength="200"
          :error="errors.has('budgetInfo')"
        />
      </div>
      <div class="release_task_items">
        <h3>任务描述</h3>
        <van-field
          v-model="description"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入任务描述"
          name="description"
          v-validate="'required'"
          maxlength="500"
          :error="errors.has('description')"
        />
      </div>
      <div class="ling-linearButton release_task_btn" @click="handleRelease">发布</div>
    </div>
  </section>
</template>

<script>
import Picker from '@/components/Picker'
import _ from 'lodash'
import { createNamespacedHelpers,mapState as rootState,mapActions as rootActions} from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('homeData')
const { mapState: myDataMapState } = createNamespacedHelpers('myData')
export default {
  name: 'ReleaseTaskPage',
  data() {
    return {
      industryStatus: false,
      jobsStatus: false,
      industry: {
        id: '',
        text: ''
      },
      jobs: {
        id: '',
        text: ''
      },
      industryTit: 'industry',
      jobsTit: 'jobs',
      description: '',
      title: '',
      budgetInfo: undefined,
      canSubmit: true //防重复提交
    }
  },
  components: {
    Picker
  },
  computed: {
    ...rootState(['industryList', 'industryPositionList']),
    ...myDataMapState(['companyUserDetail'])
  },
  created() {
    this.getIndustryList()
    this.$notify({ type: 'primary', message: '通知内容' })
  },
  methods: {
    ...rootActions(['getIndustryList', 'getIndustryPositionList']),
    ...mapActions(['createJob']),
    handleUpdateIndustryInfo() {
      this.industryStatus = true
    },
    handleUpdateJobsInfo() {
      this.jobsStatus = true
      this.getIndustryPositionList(this.industry.id)
    },
    changeStatus(msg) {
      // console.log(msg)
      switch (msg.title) {
        case 'industry':
          this.industryStatus = msg.status
          if (msg.value) {
            this.industry = msg.value
            this.jobs = {}
          }
          break
        case 'jobs':
          this.jobsStatus = msg.status
          if (msg.value) this.jobs = msg.value
        default:
      }
    },
    //lodash 的debounce防重复提交
    handleRelease() {
      this.$validator.validate().then(result => {
        if (result) {
          const { budgetInfo, description, title, companyUserDetail } = this
          const params = {
            companyId: companyUserDetail.zbCompanyResponse.id,
            description,
            industryId: this.industry.id,
            industryPositionId: this.jobs.id,
            jobStatus: 'WAITING',
            budgetInfo,
            title
          }
          if (!this.canSubmit) return
          this.canSubmit = false
          this.createJob(params).then(res => {
            this.$dialog
              .alert({
                title: '任务发布成功！',
                message: '请到“我的—已发布任务”中进行查看任务进度'
              })
              .then(() => {
                this.$router.go(-1)
              })
            this.canSubmit = true
          })
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.release_task_wrap {
  .release_task_detail {
    padding-left: 20px;
    position: relative;
    .release_task_items {
      border-bottom: solid 1px #dddddd;
      margin-top: 18px;
      position: relative;
      h3 {
        color: #666;
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
      }
      .van-cell {
        padding: 10px 0;
      }
      .filter-items-icons {
        position: absolute;
        right: 20px;
        top: 32px;
        font-size: 10px;
        color: #666;
      }
      .active {
        color: #7ac5ef;
      }
    }
  }
  .release_task_btn {
    width: 155px;
    height: 45px;
    line-height: 45px;
    position: absolute;
    bottom: -80px;
    left: 50%;
    margin-left: -77px;
    font-size: 14px;
  }
}
</style>
